<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type='text/javascript' src='../vue.js'></script>
    
</head>
<body>
    <div id="root">
        <p :style="{opacity}"> {{textA}} </p>
        <button @click = destroySelf>点我销毁vm</button>
    </div>

    <script type='text/javascript'>
        new Vue({ 
            el: '#root',
            data: {
                opacity: 1,
                textA: "修改我的透明度"
            },
            methods: {
                destroySelf(){
                    document.querySelector
                    //调用destroy会触发
                    this.$destroy()
                }
            },
            
            beforeCreate() {
                //beforeCreate 是创建什么之前?? : 数据监测 数据代理
                //此时vm身上还没有data、methods
                console.log("即将初始化???")
            },
            
            created() {
                //创建的是什么?? : 数据监测 数据代理
                //此时vm身上有了data、methods,并且已经初始化好
                console.log("初始化完成")
                console.log(this)
               
            },
            beforeMount() {
                //此时页面上展示的是Vue还未解析的DOM元素 
                //在此操作DOM元素 有可能被Vue解析过后给覆盖  
                document.querySelector('p').innerText = "改透明度"
                console.log("即将挂载")
                debugger;
            },
            mounted() {
                console.log("挂载完成")
                this.my_interval = setInterval(()=>{
                    console.log("定时器正在调用")
                    if(this.opacity <= 0){
                        this.opacity = 1
                    }
                    this.opacity -= 0.01
                },20)
            },
            beforeUpdate() {
                console.log("即将更新")
            },
            update() {
                console.log("完成更新")
            },
            beforeDestroy() {
                console.log("即将被销毁")
                clearInterval(this.my_interval) 
            },
            destroyed() {
                console.log("已经被销毁")
            },
        })

       
    </script>
    

</body>
</html>